<template>
    <el-row>
        <el-col :span="24" class="offWebHeader">
            <el-col :span="12">
                <router-link :to="{path:'/index',query:{id:''}}"><img src="../../assets/offWeb/Logo.png" height="45px"
                                                                      title="华远财富"
                                                                      class="logoImg"></router-link>
            </el-col>
            <el-col :span="12" v-if="!userInfo">
                <div class="topNav">
                    <router-link :to="{path:'/index',query:{id:''}}" class="indexLink"
                                 v-bind:class="{ active: this.$route.path=='/index'?true:false }">首页{{userInfo}}
                    </router-link>
                    <router-link :to="{path:'/personalCenter',query:{id:''}}" class="adminLink"
                                 v-bind:class="{ active: this.$route.path=='/personalCenter'?true:false }">财富资讯
                    </router-link>
                    <router-link :to="{path:'/table',query:{id:''}}" class="adminLink"
                                 v-bind:class="{ active: this.$route.path=='/table'?true:false }">个人中心
                    </router-link>
                    <router-link :to="{path:'/contactUs',query:{id:''}}" class="adminLink"
                                 v-bind:class="{ active: this.$route.path=='/contactUs'?true:false }">联系我们
                    </router-link>
                    <el-button round @click="login" class="loginIS">登录 / 注册</el-button>
                </div>
            </el-col>
            <el-col :span="12" v-else>
                <div class="topNav">
                    <router-link :to="{path:'/index',query:{id:''}}" class="indexLink"
                                 v-bind:class="{ active: this.$route.path=='/index'?true:false }">首页
                    </router-link>
                    <router-link :to="{path:'/personalCenter',query:{id:''}}" class="adminLink"
                                 v-bind:class="{ active: this.$route.path=='/personalCenter'?true:false }">财富资讯
                    </router-link>
                    <router-link :to="{path:'/table',query:{id:''}}" class="adminLink"
                                 v-bind:class="{ active: this.$route.path=='/table'?true:false }">个人中心
                    </router-link>
                    <router-link :to="{path:'/contactUs',query:{id:''}}" class="adminLink"
                                 v-bind:class="{ active: this.$route.path=='/contactUs'?true:false }">联系我们
                    </router-link>
                    <span class="names">欢迎{{JSON.parse(userInfo).name}}！</span>
                    <el-button divided @click.native="logout" class="logout">退出</el-button>
                </div>
            </el-col>
        </el-col>
    </el-row>
</template>
<script type="text/ecmascript-6">
    let user = JSON.parse(sessionStorage.getItem('user'));
    export default {
        name: 'offHeader',
        components: {},
        methods: {
            login() {
                this.$router.replace('/login')
            },
            //退出登录
            logout: function () {
                var _this = this;
                this.$confirm('确认退出吗?', '提示', {
                    //type: 'warning'
                }).then(() => {
                    sessionStorage.removeItem('user');
                    _this.$router.push('/login');
                }).catch(() => {

                });
            },
        },
        data() {
            return {
                userInfo: sessionStorage.getItem('user'),
            }
        }

    }
</script>
<style lang="scss" scoped>
    * {
        padding: 0;
        margin: 0;
    }

    .offWebHeader {
        padding: 10px 2% 5px 2%;
        background: #141925;
    }

    .topNav {
        margin-top: 2px;
        text-align: right;
        .names {
            color: #B69D99;
            font-size: 14px;
        }
    }

    .logout {
        font-size: 14px;
        color: #fff;
        border: none;
        background: none;
    }

    .logout:hover {
        color: rgba(255, 247, 240, 0.1);
    }

    .loginIS {
        background: none;
        width: 120px;
        height: 40px;
        border: 1px solid rgba(255, 247, 240, 1);
        border-radius: 25px;
        font-size: 12px;
        color: #fff;
    }

    .indexLink, .adminLink {
        color: #fff;
        font-size: 16px;
        padding: 0 0px 10px 0;
        text-decoration: none;
        margin-right: 30px;
    }

    .topNav .active {
        border-bottom: 2px solid rgba(247, 174, 102, 1);
    }

    .loginIS:hover {
        border: 1px solid #F7AE66;
        background: rgba(255, 247, 240, 0.1);
    }
</style>